<script lang="ts" setup>
import LisTarr from './LisTarr.vue'
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import type { arrss1 } from '@/services/types/Applic'
import { useRouter } from 'vue-router'
const activeName = ref('校内通知')
const emit = defineEmits<{ (e: 'handleClick', tab: TabsPaneContext): void }>()
const handleClick = (tab: TabsPaneContext) => {
  emit('handleClick', tab)
}
defineProps<{
  typeList: arrss1
}>()
const router = useRouter()

const add = () => {
  router.push('/message')
}
</script>

<template>
  <div class="zhong-1">
    <el-tabs
      v-model="activeName"
      type="card"
      class="demo-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane
        v-for="(item, index) in typeList"
        :key="index"
        :name="item.label"
      >
        <template #label>
          <span class="cu-1">
            <span>{{ item.label }}</span>
          </span>
        </template>
        <LisTarr></LisTarr>
      </el-tab-pane>
    </el-tabs>
    <div class="chan-1" @click="add">查看更多新闻</div>
  </div>
</template>

<style lang="scss" scoped>
.zhong-1 {
  width: 640px;
  height: 100%;
  position: relative;
  .chan-1 {
    position: absolute;
    right: 20px; /* 靠右显示 */
    bottom: 10px; /* 靠底部显示 */
    color: #005ea5;
    cursor: pointer;
  }
}
.cu-1 {
  width: 118px;
  text-align: center;
  font-size: 16px;
}
</style>
